<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div
        class="avue-breadcrumb"
        :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        v-if="setting.collapse && !isHorizontal"
      >
        <i class="icon-navicon" @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">
      <div v-if="setting.collapse && $route.name == '岗位地图'" class="top-bar__item">
        <span>当前队伍：</span>
        <el-select
          v-model="$store.state.common.team"
          class="mr10"
          @change="getSequenceList"
          style="width: 180px"
          placeholder="请选择队伍"
        >
          <el-option v-for="item in teamList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <span>当前序列：</span>
        <el-select
          v-model="$store.state.common.sequence"
          class="mr10"
          style="width: 180px"
          placeholder="请选择序列"
          @change="setSequenceId"
        >
          <el-option
            v-for="item in sequenceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button
          link
          icon="el-icon-folder"
          class="f24 mr10"
          @click="$store.commit('openTreeList')"
          v-if="!isOpen"
        ></el-button>
        <el-button
          link
          icon="el-icon-folder-opened"
          class="f24 mr10"
          @click="$store.commit('closeTreeList')"
          v-else
        ></el-button>
        <span v-if="posiList.length > 1">
          任职地图：
          <el-select
            v-model="_size"
            class="mr10"
            style="width: 300px"
            placeholder="选择现在任职情况"
            @change="changeMap"
          >
            <el-option v-for="item in posiList" :key="item.id" :label="item.label" :value="item.id">
            </el-option>
          </el-select>
        </span>
      </div>
      <!-- <top-menu ref="topMenu" v-if="setting.menu"></top-menu> -->
      <!-- <top-search class="top-bar__item" v-if="setting.search"></top-search> -->
    </div>
    <div class="top-bar__right">
      <div v-if="setting.lock" class="top-bar__item">
        <!-- <top-lock></top-lock> -->
      </div>
      <div v-if="setting.theme" class="top-bar__item">
        <top-theme></top-theme>
      </div>
      <!-- <div class="top-bar__item">
        <top-lang></top-lang>
      </div> -->
      <div class="top-bar__item" v-if="setting.fullscren">
        <top-full></top-full>
      </div>
      <div class="top-bar__item" v-if="setting.debug">
        <!-- <top-logs></top-logs> -->
      </div>
      <div class="top-user">
        <img class="top-bar__img" :src="userInfo.avatar" />
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userInfo.real_name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
              </el-dropdown-item>
              <el-dropdown-item @click="logout" divided
                >{{ $t('navbar.logOut') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <top-setting></top-setting>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex';
import topLock from './top-lock.vue';
import topMenu from './top-menu.vue';
import topSearch from './top-search.vue';
import topTheme from './top-theme.vue';
import topLogs from './top-logs.vue';
import topLang from './top-lang.vue';
import topFull from './top-full.vue';
import topSetting from '../setting.vue';
import {
  getTeamList,
  getSequenceList,
  getPositionSequenceList,
  getMapWithTeam,
} from '@/api/position/team';

export default {
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topLogs,
    topLang,
    topFull,
    topSetting,
  },
  name: 'top',
  data() {
    return {
      isWel: '',
      posiList: [],
      _size: '',
    };
  },
  filters: {},
  created() {
    this.getCurrentPosiMap();
  },
  computed: {
    ...mapGetters([
      'setting',
      'userInfo',
      'tagWel',
      'tagList',
      'isCollapse',
      'tag',
      'logsLen',
      'logsFlag',
      'isHorizontal',
      'team',
      'teamList',
      'sequence',
      'sequenceList',
      'isOpen',
      'size',
    ]),
  },
  methods: {
    setCollapse() {
      this.$store.commit('SET_COLLAPSE');
    },
    logout() {
      this.$confirm(this.$t('logoutTip'), this.$t('tip'), {
        confirmButtonText: this.$t('submitText'),
        cancelButtonText: this.$t('cancelText'),
        type: 'warning',
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          this.$router.push({ path: '/login' });
        });
      });
    },
    async getCurrentPosiMap() {
      sessionStorage.removeItem('teamId');
      sessionStorage.removeItem('sequenceId');
      const res = await getMapWithTeam();
      this.posiList = [];
      this._size = '';
      let teamId = '',
        sequenceId = '';
      res.data.data.forEach(item => {
        if (item.positionUserStatus == 1) {
          teamId = item.id;
          this.$store.commit('SET_TEAM', teamId);
          sessionStorage.setItem('teamId', teamId);
        }
        item.sequences.forEach(s => {
          if (s.positionUserStatus == 1) {
            sequenceId = s.id;
            sessionStorage.setItem('sequenceId', sequenceId);
            this.$store.commit('SET_SEQUENCE', sequenceId);
          }
          this.posiList.push({
            id: item.id + '_' + s.id,
            label: (s.positionUserStatus == 1 ? '现：' : '曾：') + item.name + '=>' + s.name,
          });
        });
      });
      console.log('this.posiList', this.posiList);
      this.getTeamList();
    },
    // 获取队伍列表
    async getTeamList() {
      const team = await getTeamList();
      this.$store.commit('SET_TEAMLIST', team.data.data || []);
      this.getSequenceList(this.team, this.sequence);
    },
    // 获取序列列表
    async getSequenceList(id, sId) {
      this.$store.commit('SET_TEAM', id);
      sessionStorage.setItem('teamId', id);
      this.positionData = {};
      this.positionSequenceData = {};
      this.directionData = {};
      if(!id){
        return
      }
      const res = await getSequenceList(id);
      if (res.data.data.length) {
        let sequenceId = res.data.data[0].id;
        if (sId) {
          sequenceId = sId;
        }
        this.$store.commit('SET_SEQUENCE', sequenceId);
        sessionStorage.setItem('sequenceId', sequenceId);
        this.$store.commit('SET_SEQUENCELIST', res.data.data);
      } else {
        this.$store.commit('SET_SEQUENCE', '');
        sessionStorage.setItem('sequenceId', '');
        this.$store.commit('SET_SEQUENCELIST', []);
      }
      if (this.posiList.length && sId) {
        console.log(this.posiList);
        let teamData = this.teamList.find(item => item.id == id);
        if (teamData) {
          let sequence = this.sequenceList.find(item => item.id == sId);
          if (sequence) {
            this._size = id + '_' + sId;
          }
        }
      }
    },
    setSequenceId(id) {
      sessionStorage.setItem('sequenceId', id);
    },
    changeMap(e) {
      const ids = e.split('_');
      this.getSequenceList(ids[0], ids[1]);
    },
  },
};
</script>

<style lang="scss" scoped>
.f14 {
  font-size: 14px;
}
</style>
